/**
 * 轮播图，
 *  a 带有长按弹出保存图片的功能
 *  b 实现同屏显示三张图， 当前图片是正常显示，其它都是缩小 ，类型3d切换
 */
const Pager = require('../../components/aotoo/core/index')
const lib = Pager.lib

// {
//   type: {
//     current: 0,
//      ...
//   },
//   data: [
//     {src: 'https://dfs.8atour.com/group1/M00/08/A9/CgoKq15lOuCACOBgAAUp2FWlV6A911_880x0.jpg'},
//     {src: 'https://dfs.8atour.com/group1/M00/08/A9/CgoKq15lOuCACOBgAAUp2FWlV6A911_880x0.jpg'},
//     ...
//   ],
//   footer: '长按保存' / footer: {title: 'xxxxx'}
// }

function adapter(data, param, isImg) {
  const {cIdx, noClick, noShowMenu, loading} = param
  return data.map((item, ii) => {
    let _pic = {}
    if (isImg) {
      _pic = {
        img: {
          id: 'item-pic'+ii,                                          //组件image没有id，自己补上去的
          src: item.src,
          mode: item.mode || 'widthFix',
          bindload: loading ? 'onloadImg' : '',
          'show-menu-by-longpress': !noShowMenu ? true : false          //长按图片，显示转发，保存提示框
        },
        '@item' : loading ? {
          $$id: 'item-pic'+ii,
          title: {
            title: ' ',
            itemClass: 'icon-loading'
          },
          itemClass: 'item-pic-load'
        } : '',
      }
    }
    else {
      _pic = item
    }
    return {
      $$id: 'p-item' +ii,
      id: 'p-item' +ii,
      ..._pic,
      itemClass: ii == cIdx ? 'active' : '',
      aim: !noClick ? 'onClickPic?id='+ii : '',
    }
  })
}
function adapterFooter(data) {
  if (typeof data == 'string') {
    return {
      title: data,
      itemClass: 'swiper-words'
    }
  }
  else if (typeof data == 'object'){
    return data
  }
  else {
    return ''
  }
}

// mkCollapse
module.exports = function(params) {
  let dft = {
    listClass: 'poster-list',           // 容器类名
    itemClass: 'poster-item',           // 子项类名
    data: [],                           // 传入collapse数组数据
    footer: '长按保存专属海报',            // footer可传入字符串，也可传入结构，有默认值，为false时，footer不显示 
    noClick: false,                     // 为true时，不支持点击切换   {cIdx: opts.type.current, noClick： true}
    noShowMenu: false,                  // 为true时， 不支持长按保存  {cIdx: opts.type.current, noShowMenu: true}
    loading: false,                      // 为true时， 不显示加载功能  {cIdx: opts.type.current, loading: true}
    type: {
      current: 0,
      'previous-margin': '120rpx',
      'next-margin': '120rpx'
    },
    isImg: true
  }

  let $$id = params.id || 'swiperInst'
  let opts = Object.assign({}, dft, params)
  return {
    $$id: $$id,
    listClass: opts.listClass,
    itemClass: opts.itemClass,
    type: {
      is: 'swiper',
      current: opts.type.current,
      'previous-margin': opts.type['previous-margin'],
      'next-margin': opts.type['next-margin'],
      // 'easing-function': 'linear',
      bindchange: 'bindchange',
      bindanimationfinish: 'bindanimationfinish'
    },  
    data: adapter(opts.data, {cIdx: opts.type.current, noClick: opts.noClick, noShowMenu: opts.noShowMenu, loading: opts.loading}, opts.isImg),
    footer: opts.footer ? adapterFooter(opts.footer) : '',
    methods: {
      __ready(){
        this.firstChange = true
        this.currentIdx = opts.type.current || 0
        this.clicking = true
      },
      onloadImg(e) {
        const id = e.currentTarget.id
        const loadInst = this.activePage.getElementsById(id)
        loadInst.addClass('disN')
      },
      bindchange(e) {
        const that = this
        const $inst = this.activePage.getElementsById('p-item'+e.detail.current)
        this.oldIdx = this.currentIdx
        $inst.animate('.poster-item', [{scale: [.85]}, {scale: [.92]}, {scale: [1]}], 200, () => {
          that.currentIdx = e.detail.current
        })
      },
      bindanimationfinish(e) {
        if (this.oldIdx !== this.current) {
          const $oldInst = this.activePage.getElementsById('p-item'+this.oldIdx)
          $oldInst.clearAnimation('.poster-item')
          if (this.firstChange) {
            $oldInst.removeClass('active')      //会重置掉onloadImg,需要再执行一次
            opts.loading ? $oldInst.find('.item-pic-load').addClass('disN') : ''
            this.firstChange = false
          }
        }
      },
      onClickPic(e, param, inst) {
        //点击左右，切换轮播
        const that = this
        if (this.clicking) {
          this.clicking = false
          const clickIdx = param.id
          const $swiperInst = this.activePage.getElementsById($$id)
          if (clickIdx !== this.currentIdx){
            $swiperInst.update({'$list.type.current': clickIdx}, function() {
              that.clicking = true
            })
          }
        }
      },
      // updateX(data) {
      //   if (data.length > 0) {
      //     this.update(adapter(data))
      //   }
      //   else {
      //     data.data = adapter(data)
      //     data.footer = adapterFooter(footer)
      //     this.update(data)
      //   }
      // }
    }
  }
}